<template>
	<view>
		<!-- 推荐套餐弹框 -->
		<uni-popup ref="recommendPopup" type="center">
			<view class="mybox">
				<view class="title">
					提示
					<view class="close" @tap="reset">
						<image src="../../../static/close.png" style="width:30upx;height: 30upx;"></image>
					</view>
				</view>
				<view class="message">
					<image src="../../../static/warning.png" style="width: 30upx;height: 30upx;margin-right:10upx;">
					</image>您当前没有合适的能量套餐
				</view>
				<view class="content">
					<view class="tip">
						推荐门店套餐
					</view>
					<view class="content-box">
						<image :src="recommendData.image" mode="widthFix" class="img"></image>
						<view class="right">
							<view class="">
								{{recommendData.title}}
							</view>
							<view class="mid">
								<view class="tips" v-for="item in recommendData.label_ids" :key="item">
									{{item}}
								</view>
							</view>
							<view class="price">
								￥{{recommendData.price}}
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btnw" @tap="toShop">
							进入门店详情
						</view>
						<view class="btnr" @tap="toDetail">
							去购买
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 使用套餐弹框 -->
		<uni-popup ref="orderPopup" type="center">
			<view class="myorderbox">
				<view class="title">
					确认套餐
					<view class="close" @tap="reset">
						<image src="../../../static/close.png" style="width:30upx;height: 30upx;"></image>
					</view>
				</view>
				<view class="content">
					<view class="item">
						<view class="name">
							获取类型
						</view>
						<view class="value">
							{{orderData.form_type}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							订单号
						</view>
						<view class="value">
							{{orderData.order_info.order_no}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							商品名称
						</view>
						<view class="value">
							{{orderData.goods_info? orderData.goods_info.title :''}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							套餐分类
						</view>
						<view class="value">
							{{orderData.device_type_name}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							当前使用店面
						</view>
						<view class="value">
							{{orderData.shop_name}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							总次数
						</view>
						<view class="value">
							{{orderData.service_num}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							剩余次数
						</view>
						<view class="value">
							{{orderData.yu_num}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							套餐单次总时长(分钟)
						</view>
						<view class="value">
							{{orderData.service_time}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							剩余核销时长(分钟)
						</view>
						<view class="value">
							{{orderData.use_time}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="btn" @tap="toStart">
						开始使用
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		sweepDevice
	} from '@/api/device.js'
	export default {
		data() {
			return {
				recommendData: {
					label_ids: []
				},
				orderData: {
					order_info: {}
				},
				deviceData: {}
			}
		},
		methods: {
			reset() {
				this.deviceData = {}
				this.$refs.recommendPopup.close()
				this.recommendData = {
					label_ids: []
				}
				this.orderData = {
					order_info: {}
				}
				this.$refs.orderPopup.close()
			},
			sancode() {
				let that = this
				uni.scanCode({
					success(res) {
						console.log('result', res.result);
						that.sweepDevice(res.result)
					}
				})
				// that.sweepDevice('00001')
			},
			toShop() {
				let page = this.getPage()
				if (page && page.route === 'pages/shop/extraTime/extraTime') {
					uni.redirectTo({
						url: '/pages/shop/shopSetMeal?shopId=' + this.recommendData.shop_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/shop/shopSetMeal?shopId=' + this.recommendData.shop_id
					})
				}
				this.reset()
			},
			toDetail() {
				let page = this.getPage()
				if (page && page.route === 'pages/shop/extraTime/extraTime') {
					uni.redirectTo({
						url: '/pages/shop/setMealDetail?shopId=' + this.recommendData.shop_id + '&goodsId=' + this
							.recommendData.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/shop/setMealDetail?shopId=' + this.recommendData.shop_id + '&goodsId=' + this
							.recommendData.id
					})
				}
				this.reset()
			},
			toStart() {
				let page = this.getPage()
				if (page && page.route === 'pages/shop/extraTime/extraTime') {
					this.$emit('getStart', {
						order_id: this.orderData.order_id,
						deviceData: JSON.stringify(this.deviceData),
						orderData: JSON.stringify(this.orderData)
					})
				} else {
					uni.navigateTo({
						url: `/pages/shop/extraTime/extraTime?order_id=${this.orderData.order_id}&deviceData=${JSON.stringify(this.deviceData)}&orderData=${JSON.stringify(this.orderData)}`
					})
				}
				this.reset()
			},
			getPage() {
				let pages = getCurrentPages()
				if (pages.length) {
					let nowPage = pages[pages.length - 1]
					return nowPage
				}
				return null
			},
			sweepDevice(device_id) {
				sweepDevice({
					device_id
				}).then(res => {
					if (res.data.code === 1) {
						if (!res.data.data.now && res.data.data.rec) {
							this.recommendData = res.data.data.rec 
							this.$refs.recommendPopup.open()
						}
						if (res.data.data.now) {
							this.orderData = res.data.data.now
							this.deviceData = res.data.data.device
							this.$refs.orderPopup.open()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.myorderbox {
		width: 620upx;
		background-color: #fff;
		border-radius: 20upx;
		font-size: 28upx;
		overflow: hidden;

		.title {
			text-align: center;
			position: relative;
			height: 100upx;
			line-height: 100upx;
			border-bottom: 1upx solid #f2f2f2;

			.close {
				position: absolute;
				right: 26upx;
				top: 4upx;
				width: 80upx;
				text-align: right;
			}
		}

		.content {
			padding: 30upx;

			.item {
				display: flex;
				margin-bottom: 26upx;

				.name {
					flex: 1;
					color: #999;
				}

				.value {
					flex: 1;
					text-align: right;
				}
			}
		}

		.bottom {
			padding: 0 30upx 30px;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 100%;
				padding: 10upx;
				border-radius: 30upx;
				background-color: #F82D1E;
				color: #fff;
				text-align: center;
			}
		}

	}

	.mybox {
		width: 620upx;
		background-color: #fff;
		border-radius: 20upx;
		font-size: 28upx;
		overflow: hidden;

		.title {
			text-align: center;
			position: relative;
			height: 100upx;
			line-height: 100upx;
			border-bottom: 1upx solid #f2f2f2;

			.close {
				position: absolute;
				right: 26upx;
				top: 4upx;
				width: 80upx;
				text-align: right;
			}
		}

		.message {
			text-align: center;
			line-height: 160upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.content {
			background-color: #f6f6f6;
			padding: 32upx;

			.tip {
				margin-bottom: 20upx;
			}
		}

		.content-box {
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			flex-wrap: nowrap;
			padding: 10upx 0 10upx 10upx;

			.img {
				width: 160upx;
				height: 160upx;
				border-radius: 10upx;
			}

			.right {
				flex: 1;
				padding-left: 30upx;

				.mid {
					margin: 10upx 0;
					display: flex;

					.tips {
						font-size: 24upx;
						padding: 2upx 4upx;
						border: 1px solid #F82D1E;
						color: #F82D1E;
						border-radius: 8upx;
						margin-right: 6upx;
					}
				}

				.price {
					color: #F82D1E;
				}
			}
		}

		.bottom {
			margin-top: 50upx;
			padding: 0 18upx;
			display: flex;
			justify-content: space-between;
		}

		.btnw {
			width: 200upx;
			border-radius: 30upx;
			border: 1upx solid #999;
			text-align: center;
			font-size: 24upx;
			padding: 10upx 0;
		}

		.btnr {
			width: 200upx;
			border-radius: 30upx;
			border: 1upx solid #F82D1E;
			background-color: #F82D1E;
			text-align: center;
			color: #fff;
			font-size: 24upx;
			padding: 10upx 0;
		}
	}
</style>
